<!doctype html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CSS3 Animation 1</title>
  <style>
	@keyframes animated_div
	{
		0%		{transform: rotate(0deg);left:0px;}
		25%		{transform: rotate(20deg);left:0px;}
		50%		{transform: rotate(0deg);left:500px;}
		55%		{transform: rotate(0deg);left:500px;}
		70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
		100%	{transform: rotate(-360deg);left:0px;}
	}

	@-webkit-keyframes animated_div
	{
	0%		{-webkit-transform: rotate(0deg);left:0px;}
	25%		{-webkit-transform: rotate(20deg);left:0px;}
	50%		{-webkit-transform: rotate(0deg);left:500px;}
	55%		{-webkit-transform: rotate(0deg);left:500px;}
	70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{-webkit-transform: rotate(-360deg);left:0px;}
	}

	@-moz-keyframes animated_div
	{
	0%   {-moz-transform: rotate(0deg);left:0px;}
	25%  {-moz-transform: rotate(20deg);left:0px;}
	50%  {-moz-transform: rotate(0deg);left:500px;}
	55%  {-moz-transform: rotate(0deg);left:500px;}
	70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {-moz-transform: rotate(-360deg);left:0px;}
	}

	@-o-keyframes animated_div
	{
	0%   {transform: rotate(0deg);left:0px;}
	25%  {transform: rotate(20deg);left:0px;}
	50%  {transform: rotate(0deg);left:500px;}
	55%  {transform: rotate(0deg);left:500px;}
	70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {transform: rotate(-360deg);left:0px;}
	}

	@keyframes toRight{
		0%   {transform: rotate(0deg);left:0px;}
	25%  {transform: rotate(20deg);left:0px;}
	50%  {transform: rotate(0deg);left:500px;}
	55%  {transform: rotate(0deg);left:500px;}
	70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {transform: rotate(-360deg);left:0px;}
	}

	.magic-div{
		width: 56px;
		height: 50px;
		padding: 10px;
		line-height:0;/* * */
		background-color:black;
		cursor:pointer;
	}
	.magic-div>span{
		background-color:white;
		margin-top:20px;
		vertical-align: top;
		width:100%;
		height:2px;
		display: inline-block;
		transition:all .6s;
	}
	.magic-div>span:first-child{
		margin-top:3px;
	}

	/* .magic-div:hover{
		animation:toRight 2s 1;
	} */
</style>
 </head>
 <body>
  <div style='margin:30px;position:relative;animation: animated_div 2s infinite;padding:10px;display:inline-block;'>CSS3 Animation</div>
	<br>
	<br>
	<br>
	Origin
	<div style='display:inline-block;' class='magic-div magic-div-right'>
	  <span></span>
	  <span></span>
	  <span></span>
	</div>
	Clone
	<div style='display:inline-block;' class='magic-div magic-div-copy'>
	  <span></span>
	  <span></span>
	  <span></span>
	</div>
	<script>
		var div = document.querySelector('.magic-div-right');
		function bind(elem,type,fn){
			elem[type]=fn;
			elem.addEventListener(type,elem[type]);
		}
		bind(div,'mouseenter',function(e){
			var first = this.firstElementChild,last = this.lastElementChild, mid = first.nextElementSibling;
			first.style.transform='scale(.5) translate(35px,25px) rotate(45deg)'
			last.style.transform='scale(.5) translate(35px,-25px) rotate(-45deg)'
			mid.style.opacity='1';
		});
		bind(div,'mouseleave',function(e){
			var first = this.firstElementChild,last = this.lastElementChild, mid = first.nextElementSibling;
			first.style.transform=last.style.transform='';
			mid.style.opacity='1';
		})
		bind(div,'click',function(e){
			var first = this.firstElementChild,last = this.lastElementChild, mid = first.nextElementSibling;
			first.style.transform= 'rotate(45deg) translate(15px,15px)';
			mid.style.opacity='0';
			last.style.transform = 'rotate(-45deg) translate(15px,-15px)';
		});

		var otherdiv = document.querySelector('.magic-div-copy');
		bind(otherdiv,'mouseenter',function(){
			div.mouseenter.call(this);
		})
		bind(otherdiv,'mouseleave',function(e){
			div.mouseleave.call(this);
		});
		bind(otherdiv,'click',function(){
			div.click.call(this);
		})

	</script>
 </body>
</html>
